<template>
  <div>
    <AxiomToolbar>
      <template v-if="selectedBucket">
        <AxiomGroup direction="horizontal" gap="large" align="center">
          <AxiomButton icon="arrow-left"  text @click="handleBackToBuckets">返回文件库列表</AxiomButton>
          <AxiomText
            size="large"
            weight="bold"
            @click="handleGoToRoot"
            clickable
            title="点击返回根目录"
          >
            当前文件库: {{ selectedBucket.display_name }}
          </AxiomText>
        </AxiomGroup>
      </template>
      <template v-else>
        <AxiomGroup justify="space-between" align="center" class="w-100">
          <AxiomTitle title="文件库管理" />
          <AxiomButton icon="plus" type="primary" @click="handleOpenCreateDialog">新建文件库</AxiomButton>
        </AxiomGroup>
      </template>
    </AxiomToolbar>

    <AxiomSection>
      <template v-if="selectedBucket">
        <FileManager ref="fileManagerRef" :bucket="selectedBucket" />
      </template>
      <template v-else>
        <BucketList
            ref="bucketListRef"
            @bucket-selected="handleBucketSelected"
            @edit-bucket="handleOpenEditDialog"
        />
      </template>
    </AxiomSection>

    <!-- 新建/编辑文件库弹窗 -->
    <AxiomDialog
      v-model="formDialogVisible"
      :title="isEditMode ? '编辑文件库' : '新建文件库'"
      @confirm="handleConfirm"
    >
      <AxiomForm ref="formRef" :model="form" label-width="80px">
        <AxiomFormItem label="显示名称" prop="display_name" :rules="{ required: true, message: '请输入显示名称' }">
          <AxiomInput v-model="form.display_name" />
        </AxiomFormItem>
        <AxiomFormItem label="描述" prop="description">
          <AxiomInput v-model="form.description" type="textarea" />
        </AxiomFormItem>
      </AxiomForm>
    </AxiomDialog>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue';
import {
  AxiomToolbar,
  AxiomGroup,
  AxiomButton,
  AxiomText,
  AxiomTitle,
  AxiomSection,
  AxiomDialog,
  AxiomForm,
  AxiomFormItem,
  AxiomInput,
} from 'axiom-view';
import { bucketApi } from '@/api/knowledge/bucket.js';
import BucketList from './components/BucketList.vue';
import FileManager from './components/FileManager.vue';

const { notification } = inject('axiom-utils');

const selectedBucket = ref(null);
const bucketListRef = ref(null);
const fileManagerRef = ref(null);

const isEditMode = ref(false);
const formDialogVisible = ref(false);
const formRef = ref(null);
const form = ref({
  id: null,
  display_name: '',
  description: '',
});

function handleGoToRoot() {
    if (fileManagerRef.value) {
        fileManagerRef.value.goToRoot();
    }
}

function handleOpenCreateDialog() {
  isEditMode.value = false;
  form.value = { id: null, display_name: '', description: '' };
  formDialogVisible.value = true;
}

function handleOpenEditDialog(bucket) {
    isEditMode.value = true;
    form.value = { ...bucket };
    formDialogVisible.value = true;
}

async function handleConfirm() {
  const isValid = await formRef.value.validate();
  if (!isValid) return;

  try {
    if (isEditMode.value) {
        await bucketApi.update(form.value.id, {
            display_name: form.value.display_name,
            description: form.value.description
        });
        notification.success({ title: '成功', message: '文件库更新成功' });
    } else {
        await bucketApi.create(form.value);
        notification.success({ title: '成功', message: '文件库创建成功' });
    }
    formDialogVisible.value = false;
    if (bucketListRef.value) {
      bucketListRef.value.fetchBuckets();
    }
  } catch (error) {
    console.error(error);
  }
}

const handleBucketSelected = (bucket) => {
  selectedBucket.value = bucket;
};

const handleBackToBuckets = () => {
  selectedBucket.value = null;
};
</script> 